<template>
  <container>
    <div class="steps">
      <el-steps align-center :active="currentStep">
        <el-step title="第一步" :icon="Edit" description="填写转账信息" />
        <el-step title="第二步" :icon="Press" description="确认转账信息" />
        <el-step title="第三步" :icon="Pennant" description="完成转账" />
      </el-steps>
    </div>
    <div class="step-content">
      <template v-if="currentStep === 0">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="付款账户" prop="account1">
            <el-input v-model="form.account1" placeholder="请输入付款账户" />
          </el-form-item>
          <el-form-item label="收款账户" prop="account2">
            <el-input v-model="form.account2" placeholder="请输入收款账户" />
          </el-form-item>
          <el-form-item label="收款人姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入收款人姓名" />
          </el-form-item>
          <el-form-item label="转账金额" prop="amount">
            <el-input v-model="form.amount" type="number" placeholder="请输入转账金额" />
          </el-form-item>
        </el-form>
        <div class="button-warpper">
          <el-button type="primary" @click="next(0)">下一步</el-button>
        </div>
      </template>
      <template v-if="currentStep === 1">
        <el-alert plain type="warning" :closable="false"
          ><Info theme="filled" /> 确认转账后，资金将直接打入对方账户，无法退回。</el-alert
        >
        <div class="confirm-info mt-20">
          <div>
            <span>付款账户：</span><span>{{ form.account1 }}</span>
          </div>
          <div>
            <span>收款账户：</span><span>{{ form.account2 }}</span>
          </div>
          <div>
            <span>收款人：</span><span>{{ form.name }}</span>
          </div>
          <div>
            <span>转账金额：</span><span>{{ form.amount }}</span>
          </div>
        </div>
        <el-divider border-style="dashed" />
        <el-form ref="formRef2" :model="form" :rules="rules2" label-width="100px">
          <el-form-item label="支付密码" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入支付密码" />
          </el-form-item>
        </el-form>
        <div class="button-warpper">
          <el-button type="primary" :disabled="loading" @click="currentStep--">上一步</el-button>
          <el-button :loading="loading" type="primary" @click="next(1)">确认转账</el-button>
        </div>
      </template>
      <template v-if="currentStep === 2">
        <div class="result">
          <Success theme="filled" :size="80" fill="#52c41a" />
          <div class="h1">操作成功</div>
          <div class="second">预计2小时内到账</div>
          <div class="info confirm-info">
            <div>
              <span>付款账户：</span><span>{{ form.account1 }}</span>
            </div>
            <div>
              <span>收款账户：</span><span>{{ form.account2 }}</span>
            </div>
            <div>
              <span>收款人：</span><span>{{ form.name }}</span>
            </div>
            <div>
              <span>转账金额：</span
              ><span style="color: var(--el-color-primary)"
                >¥<em class="amount">{{ form.amount }}</em></span
              >
            </div>
          </div>
        </div>
        <div class="button-warpper">
          <el-button type="primary" @click="resetForm">再转一笔</el-button>
          <el-button type="success">查看账单</el-button>
        </div>
      </template>
    </div>
  </container>
</template>

<script setup lang="ts">
import container from '@/components/container';
import { Edit, Info, Pennant, Press, Success } from '@icon-park/vue-next';
import { FormRules } from 'element-plus';
import { reactive, ref } from 'vue';

const currentStep = ref(0);

const form = ref({
  account1: '************',
  account2: '************',
  name: '***',
  amount: 100,
  password: '123456'
});

const rules = reactive<FormRules<any>>({
  account1: { required: true, message: '请输入付款账户', trigger: 'blur' },
  account2: { required: true, message: '请输入收款账户', trigger: 'blur' },
  name: { required: true, message: '请输入收款人姓名', trigger: 'blur' },
  amount: [
    { required: true, type: 'number', message: '请输入转账金额', trigger: 'blur' },
    { type: 'number', min: 50, message: '转账金额不能低于50元', trigger: 'blur' }
  ]
});
const rules2 = reactive<FormRules<any>>({
  password: { required: true, message: '请输入支付密码', trigger: 'blur' }
});
const formRef = ref();
const formRef2 = ref();
const loading = ref(false);

function next(step) {
  if (step === 0) {
    formRef.value.validate((valid) => {
      if (!valid) return;
      currentStep.value++;
    });
  } else if (step === 1) {
    formRef2.value.validate((valid) => {
      if (!valid) return;
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        currentStep.value++;
      }, 2000);
    });
  }
}

function resetForm() {
  form.value = {
    account1: '************',
    account2: '************',
    name: '***',
    amount: 100,
    password: '123456'
  };
  currentStep.value = 0;
}
</script>

<style scoped lang="scss">
.steps {
  width: 730px;
  margin: 0 auto;
}
.step-content {
  width: 500px;
  margin: 40px auto 0;

  .button-warpper {
    text-align: center;
  }

  .confirm-info {
    > div {
      margin-bottom: 8px;
      line-height: 32px;
      font-size: 14px;
      // color: #999;
      display: flex;

      > span:first-child {
        width: 80px;
      }
      .amount {
        font-style: normal;
        font-size: 24px;
        font-weight: 900;
      }
    }
  }

  .result {
    text-align: center;
    .h1 {
      font-size: 24px;
      font-weight: 900;
      margin: 10px 0 8px;
    }
    .second {
      font-size: 14px;
      color: #999;
      margin-bottom: 20px;
    }
  }
  .info {
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed var(--admin-border-color);
    background-color: #f6f6f6;
    margin-bottom: 20px;
  }
}
</style>
